/**
 * ProTable 使用 网址：https://protable.ant.design/
 * @author SPY
 * @date 2020/05/03
 */

import React, { useState, useRef } from 'react';
import {
  Avatar,
  Input,
  Select,
  DatePicker,
  Button,
  Modal,
  message,
} from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { queryProTableList } from '@/services/umiHooks';

const ProTablePage = () => {
  const [keyWord, setKeyWord] = useState<string>('');
  const [selectValue, setSelectValue] = useState<string | undefined>(undefined);
  const [visible, setVisible] = useState<boolean>(false);

  const ref = useRef<ActionType>();

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      width: 50,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      width: 50,
      // valueEnum: {
      //   male: '男',
      //   female: '女',
      // },
      render: (text: any, record: any) => (
        <span>{record.gender === 'male' ? '男' : '女'}</span>
      ),
      renderFormItem: (text: any) => (
        <Select
          placeholder="自定义输入提示"
          onChange={handleChangeSelect}
          allowClear
        >
          <Select.Option key="male" value="male">
            男
          </Select.Option>
          <Select.Option key="female" value="female">
            女
          </Select.Option>
        </Select>
      ),
    },
    {
      title: '头像',
      dataIndex: 'picture',
      width: 50,
      hideInSearch: true, // 在搜索中不显示
      render: (text: any) => <Avatar shape="square" size={50} src={text} />,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 50,
    },
  ];

  // select 发生改变
  const handleChangeSelect = (value: any) => {
    setSelectValue(value);
  };

  // 新建提交
  const handleCreateSubmit = () => {
    message.success('新建成功');
    // 刷新
    if (ref.current) {
      ref.current.reload();
    }
    setVisible(false);
  };

  return (
    <ProTable
      columns={columns}
      actionRef={ref}
      request={(params: any = {}) =>
        queryProTableList({
          ...params,
          inc: 'name,email,picture,login,gender',
          results: params.pageSize,
          page: params.current,
          total: 100,
        })
      }
      // postData={(data) => {
      //   return data.map(i=>{
      //     i.name=`${i.name}马云`;
      //     return i;
      //   });
      // }} // 对服务器返回的数据进行加工处理后再使用
      rowKey="uuid"
      pagination={{
        showSizeChanger: true,
        showQuickJumper: true,
        defaultPageSize: 10,
        pageSizeOptions: ['5', '10', '20', '50'],
      }}
      // size='large' // 如果size设置为large后，“密度”将不再提供切换功能
      // params={{
      //   name: keyWord,
      //   gender: selectValue,
      // }}
      // onLoad={(dataSource)=>console.log(dataSource)} // 在每次发送请求时执行
      beforeSearchSubmit={params => {
        return {
          gender: selectValue,
          ...params,
        };
      }}
      search={{
        span: 6,
        searchText: '实时搜索',
      }}
      // options={{ fullScreen: true, reload: false, setting: false, density: false }}

      dateFormatter="string"
      headerTitle="简单搜索"
      toolBarRender={() => [
        // <Input.Search
        //   placeholder="请输入"
        //   onSearch={value => setKeyWord(value)}
        // />,
        <Button type="primary" onClick={() => setVisible(true)}>
          新建
        </Button>,
        <Modal
          visible={visible}
          title="新建"
          onCancel={() => setVisible(false)}
          onOk={handleCreateSubmit}
        >
          222
        </Modal>,
      ]}
    />
  );
};

ProTablePage.title = 'ProTable 使用';

export default ProTablePage;
